<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<z-paging
			ref="paging"
			v-model="dataList"
			@query="queryList"
			use-page-scroll
			:scrollable="false"
			:hide-empty-view="hideEmptyView"
			:refresher-enabled="false"
			@contentHeightChanged="contentHeightChanged"
			:auto="false"
			:auto-clean-list-when-reload="false"
			:show-loading-more-when-reload="true"
			:auto-show-back-to-top="true"
			style="padding-top: 20rpx;background: rgba(255,255,255,0.8);"
		>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<armed-card :data="item"></armed-card>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';
import HomeAPI from '@/api/home/api.ts';

const props = defineProps({
	//当前组件的index，也就是当前组件是swiper中的第几个
	tabIndex: {
		type: Number,
		default: function () {
			return 0;
		}
	},
	//当前swiper切换到第几个index
	currentIndex: {
		type: Number,
		default: function () {
			return 0;
		}
	},
	routeCategoryId: { type: String, default: '' }
});

const emits = defineEmits(['heightChanged']);

const paging = ref(null);

const dataList = ref([]);
const height = ref(0);
const hideEmptyView = ref(true);
const completeFunc = ref(null);

watch(
	() => props.currentIndex,
	(newVal) => {
		if (newVal === props.tabIndex) {
			setTimeout(() => {
				paging.value.reload();
			}, 100);
		}
	},
	{
		immediate: true
	}
);

const queryList = (pageNo, pageSize) => {
	let params = {
		pageNum: pageNo,
		pageSize: pageSize,
		routeCategoryId: props.routeCategoryId,
		routeType: props.routeType
	};
	HomeAPI.getRoutePage(params)
		.then(({ data }) => {
			paging.value.complete(data.records);
			hideEmptyView.value = false;
			// 请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
			if (completeFunc.value) {
				completeFunc.value();
			}
		})
		.catch(() => {
			paging.value.complete(false);
			// 请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
			if (completeFunc.value) {
				completeFunc.value();
			}
		});
};

// 页面通知当前子组件刷新列表
const reload = (tempCompleteFunc) => {
	// 先把父组件下拉刷新的回调函数存起来
	completeFunc.value = tempCompleteFunc;
	// 调用z-paging的reload方法
	paging.value.reload();
};

// 当列表高度改变时，通知页面的swiper同步更改高度
const contentHeightChanged = (height) => {
	const finalHeight = (dataList.value.length ? height : 0) + uni.upx2px(30);
	// 限制内容最小高度为屏幕可见高度减z-tabs高度。注意，页面中有使用slot="top"插入的view，则此处的minHeight还应该减去slot="top"插入的view的高度
	const minHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(170);
	emits('heightChanged', Math.max(finalHeight, minHeight));
};

// 页面通知当前子组件加载更多数据
const doLoadMore = () => {
	paging.value.doLoadMore();
};

// 页面通知当前子组件清除数据
const clear = () => {
	paging.value.clear();
	hideEmptyView.value = true;
};

defineExpose({ reload, doLoadMore, clear });
</script>

<style scoped lang="scss">
/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
.content {
	height: 100%;
}
</style>
